<template>
  <div>
    <div class="fx3-box">
      <ul>
        <li v-for="(msg, i) in arr" :key="i">
          <img :src="msg.img" />
          <p>{{ msg.p2 }}</p>
          <img :src="msg.img2" />
          <span>{{ msg.span2 }}</span>
          <span>{{ msg.span3 }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          img: "https://download-bds.vmall.com/irs/content/cover/9d3efa733d4e94b6de841f163afef988/cover/1653787330499_c0616c06-6905-4dad-9515-89ca2fc53473.webp",
          p1: "#华为MateBook系列新品...",
          p2: "华为商城618",
          img2: "https://res.vmallres.com/portal/1.11.4.301/h5/images/Empty_user.png",
          span2: "华为商城头条",
          span3: "14000",
        },
        {
          img: "https://download-bds.vmall.com/irs/content/cover/9d3efa733d4e94b6de841f163afef988/cover/1653787330499_c0616c06-6905-4dad-9515-89ca2fc53473.webp",
          p1: "#华为MateBook系列新品...",
          p2: "华为商城618",
          img2: "https://res.vmallres.com/portal/1.11.4.301/h5/images/Empty_user.png",
          span2: "华为商城头条",
          span3: "14000",
        },
        {
          img: "https://download-bds.vmall.com/irs/content/cover/9d3efa733d4e94b6de841f163afef988/cover/1653787330499_c0616c06-6905-4dad-9515-89ca2fc53473.webp",
          p1: "#华为MateBook系列新品...",
          p2: "华为商城618",
          img2: "https://res.vmallres.com/portal/1.11.4.301/h5/images/Empty_user.png",
          span2: "华为商城头条",
          span3: "14000",
        },
        {
          img: "https://download-bds.vmall.com/irs/content/cover/9d3efa733d4e94b6de841f163afef988/cover/1653787330499_c0616c06-6905-4dad-9515-89ca2fc53473.webp",
          p1: "#华为MateBook系列新品...",
          p2: "华为商城618",
          img2: "https://res.vmallres.com/portal/1.11.4.301/h5/images/Empty_user.png",
          span2: "华为商城头条",
          span3: "14000",
        },
        {
          img: "https://download-bds.vmall.com/irs/content/cover/9d3efa733d4e94b6de841f163afef988/cover/1653787330499_c0616c06-6905-4dad-9515-89ca2fc53473.webp",
          p1: "#华为MateBook系列新品...",
          p2: "华为商城618",
          img2: "https://res.vmallres.com/portal/1.11.4.301/h5/images/Empty_user.png",
          span2: "华为商城头条",
          span3: "14000",
        },
        {
          img: "https://download-bds.vmall.com/irs/content/cover/9d3efa733d4e94b6de841f163afef988/cover/1653787330499_c0616c06-6905-4dad-9515-89ca2fc53473.webp",
          p1: "#华为MateBook系列新品...",
          p2: "华为商城618",
          img2: "https://res.vmallres.com/portal/1.11.4.301/h5/images/Empty_user.png",
          span2: "华为商城头条",
          span3: "14000",
        },
        {
          img: "https://download-bds.vmall.com/irs/content/cover/9d3efa733d4e94b6de841f163afef988/cover/1653787330499_c0616c06-6905-4dad-9515-89ca2fc53473.webp",
          p1: "#华为MateBook系列新品...",
          p2: "华为商城618",
          img2: "https://res.vmallres.com/portal/1.11.4.301/h5/images/Empty_user.png",
          span2: "华为商城头条",
          span3: "14000",
        },
        {
          img: "https://download-bds.vmall.com/irs/content/cover/9d3efa733d4e94b6de841f163afef988/cover/1653787330499_c0616c06-6905-4dad-9515-89ca2fc53473.webp",
          p1: "#华为MateBook系列新品...",
          p2: "华为商城618",
          img2: "https://res.vmallres.com/portal/1.11.4.301/h5/images/Empty_user.png",
          span2: "华为商城头条",
          span3: "14000",
        },
        {
          img: "https://download-bds.vmall.com/irs/content/cover/9d3efa733d4e94b6de841f163afef988/cover/1653787330499_c0616c06-6905-4dad-9515-89ca2fc53473.webp",
          p1: "#华为MateBook系列新品...",
          p2: "华为商城618",
          img2: "https://res.vmallres.com/portal/1.11.4.301/h5/images/Empty_user.png",
          span2: "华为商城头条",
          span3: "14000",
        },
        {
          img: "https://download-bds.vmall.com/irs/content/cover/9d3efa733d4e94b6de841f163afef988/cover/1653787330499_c0616c06-6905-4dad-9515-89ca2fc53473.webp",
          p1: "#华为MateBook系列新品...",
          p2: "华为商城618",
          img2: "https://res.vmallres.com/portal/1.11.4.301/h5/images/Empty_user.png",
          span2: "华为商城头条",
          span3: "14000",
        },
        {
          img: "https://download-bds.vmall.com/irs/content/cover/9d3efa733d4e94b6de841f163afef988/cover/1653787330499_c0616c06-6905-4dad-9515-89ca2fc53473.webp",
          p1: "#华为MateBook系列新品...",
          p2: "华为商城618",
          img2: "https://res.vmallres.com/portal/1.11.4.301/h5/images/Empty_user.png",
          span2: "华为商城头条",
          span3: "14000",
        },
        {
          img: "https://download-bds.vmall.com/irs/content/cover/9d3efa733d4e94b6de841f163afef988/cover/1653787330499_c0616c06-6905-4dad-9515-89ca2fc53473.webp",
          p1: "#华为MateBook系列新品...",
          p2: "华为商城618",
          img2: "https://res.vmallres.com/portal/1.11.4.301/h5/images/Empty_user.png",
          span2: "华为商城头条",
          span3: "14000",
        },
      ],
    };
  },
};
</script>

<style scoped>
.fx3-box {
  width: 100%;
  height: 10rem;
}
.fx3-box ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.fx3-box ul li {
  width: 45%;
  height: 2.69rem;
  border-radius: 0.20rem;
}
.fx3-box ul li img:nth-of-type(1) {
  width: 100%;
  height: 1.88rem;
}
.fx3-box ul li p:nth-of-type(1) {
  font-size: 0.14rem;
  margin-left: 0.08rem;
}
.fx3-box ul li img:nth-of-type(2) {
  width: 0.22rem;
  height: 0.22rem;
  margin-left: 00.08rem;
  margin-top: 0.05rem;
  display: inline;
}
.fx3-box ul li span:nth-of-type(1) {
  font-size: 0.12rem;
  color: #b1b1b1;
  margin-left: 00.05rem;
}
.fx3-box ul li span:nth-of-type(2) {
  font-size: 0.08rem;
  color: #b1b1b1;
  margin-left: 0.5rem;
}
</style>